<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div class="box">
        <h1>你好啊{{name}}</h1>
    </div>
</body>
</html>
<script>
    //初始化Vue类的实例，让实例与模板进行关联
    // Vue构造函数（）里需要配置项
    const VM = new Vue({
        // el:'.box',//第一种方式：VM实例与容器进行关联
        
        // data:{      //data第一种写法
        //     name:'小心超人'
        // }

        data(){  //data第二种写法

              // return name='开心超人'  (错误写法)
              //data functions should return an object:如果data配置项写法如果是函数,必须要返回一个对象

            //data函数返回结果作为VM属性与属性值
            return {name:'花心超人'}
        }



    })

    //第二种方式：VM实例与容器进行关联
     //$mount【挂载】：它是Vue.prototype原型的一个方法，VM可以调用。
    //$mount方法主要的作用是VM与容器进行关联 ,传递的参数容器CSS选择器(字符串类型的)
    VM.$mount('.box') 
</script>